<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>04-简单的组件间传值</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model='inputValue'>
		<button v-on:click="submit">提交</button>
		<!-- <ul>
			<li v-for="item in list">{{item}}</li>
		</ul> -->
		<ul>
			<todo-item v-for="(item, index) in list"
					   :content="item"
					   :index="index"
					   @delete="deleteItem">
			</todo-item>
		</ul>
	</div>
</body>
<script>
//局部组件
var TodoItem={
	props:['content','index'],
	template:"<li @click='click'>{{content}}</li>",
	methods:{
		click:function(){
			this.$emit('delete',this.index)
		}
	}
}
var app=new Vue({
	el:'#app',
	components:{
		TodoItem:TodoItem
	},
	data:{
		list:[],
		inputValue:'',
	},
	methods:{
		submit:function(){
			this.list.push(this.inputValue);
			this.inputValue="";
		},
		deleteItem:function(index){
			this.list.splice(index,1)
		}
	}
})

</script>
</html>